<template>
  <div>
    <template>
      <el-table :data="orders" stripe="true"  style="width: 100%;font-size: 15.5px;">
        <el-table-column type="expand">
            <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="" class="item">
                <el-image :src="props.row.head" style="width: 100px;height: 150px"></el-image>
              </el-form-item>
              <el-form-item label="商品单价" class="item">
                <span class="aa">{{ props.row.price }}    x  {{props.row.num}}</span>
              </el-form-item>
              <el-form-item label="收货地址" class="item">
                <span class="aa">{{ props.row.province }}{{ props.row.city }}{{ props.row.district }}{{props.row.address}}</span>
              </el-form-item>
              <el-form-item label="收货人" class="item">
                <span class="aa">{{props.row.namess}}</span>
              </el-form-item>
              <el-form-item label="状态" class="item">
                <span class="aa" v-if="props.row.state==0">未发货</span>
                <span class="aa" v-if="props.row.state==1">已发货</span>
                <span class="aa" v-if="props.row.state==4">退货审理中</span>
                <span class="aa" v-if="props.row.state==5">已退货</span>
                <span class="aa" v-if="props.row.state==3">已收货</span>
              </el-form-item>
              <el-form-item label="操作" class="item">
                <template>
<!--                  <el-popconfirm title="确定删除这个订单吗" @confirm="del(props.row.id)" cancel-button-type="success">-->
<!--                    <el-button  class="aa" type="danger" icon="el-icon-delete" slot="reference"  >删除该订单</el-button>-->
<!--                  </el-popconfirm>-->
                  <el-popconfirm title="确定退货吗" @confirm="del(props.row)" cancel-button-type="success">
                    <el-button  class="aa" type="danger" icon="el-icon-delete" slot="reference"  >退货</el-button>
                  </el-popconfirm>
                  <el-button type="success" id="ss" @click="shouhuo(props.row)" >确认收货</el-button>
                  <el-dialog
                    title="提示"
                    :visible.sync="dialogVisible"
                    width="30%"
                    :before-close="handleClose">
                    <el-form ref="form" :model="form" label-width="80px">
                      <el-form-item label="退货理由">
                        <el-input type="textarea" v-model="forderfind.desc"></el-input>
                      </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                      <el-button type="primary" @click="onSubmit">提交退货</el-button>
                    </span>
                  </el-dialog>
                </template>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column label="商品名" prop="name"></el-table-column>
        <el-table-column label="购买时间" prop="gtime" :sortable="true"></el-table-column>
        <el-table-column label="支付金额" prop="zongjia" :sortable="true"></el-table-column>
      </el-table>
    </template>
  </div>
</template>

<script>
import moment from "moment";
export default {
  name: "Order",
  created() {
  this.find()
  },
  data(){
    return{
      orders:{},
      dialogVisible: false,
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      tt:{},
      forderfind:{},
    }
  },
  methods:{
    shouhuo(row){

      if (row.state==3){
        alert("不能重复收货")
      }else if (row.state==5){
        alert("商品已退货不能收货")
      }
        else{
        this.$http.post("/frontservice/frturns/up",{state:3,id:row.id}).then(data=>{
          alert("已收货")
          this.find()
        })
      }
    },
    find(){
      let uid=this.$store.state.user
      this.$http.post("/frontservice/forderss/find",{uid}).then(data=>{
        this.orders=data.data
        console.log(this.orders)
      })
    },del(row){
      this.forderfind.id=row.id;
      if (row.state==4){
        alert("退货审理中")
      }else{
        this.dialogVisible=true
      }

    },handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    }, onSubmit() {
      let f_user=this.$store.state.user
      this.tt.id=0;
      this.tt.f_order=this.forderfind.id;
      this.tt.kuaidi=4413454;
      this.tt.parcelid=4755798;
      this.tt.f_user=f_user;
      let  date= new Date()
      let dates=moment(date).format('YYYY-MM-DD HH:mm:ss')
      this.tt.returntime=dates;
      this.tt.remark=this.forderfind.desc
      this.$http.post("/frontservice/frturns/up",{state:4,id:this.forderfind.id}).then(data=>{
        alert("退货请求已发送")
        this.$http.post("/frontservice/frturns/add",this.tt).then(data=>{
          this.orders=data.data
          this.find()
        })
      })
      this.dialogVisible=false
    }
  }
}
</script>

<style scoped>
.demo-table-expand {
  font-size: 20px;
}
.demo-table-expand .item {
  margin-bottom: 0px;
  width: 50%;
}
.item{
  width: 50px;
  color: #99a9bf;;
  display: block;
}
.aa{
  display: block;
  margin-top: 0px;
  font-size: 16px;
}
</style>
